<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input clearable v-model="search.name" placeholder="关键词"  style="width: 170px; margin-left: 10px"></el-input>
      <el-button type="primary" icon="el-icon-search"  @click="searchClick()" style="margin-left: 10px">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" border
      fit highlight-current-row stripe style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="车间名称">
        <template slot-scope="scope">
          <span>{{ scope.row.shopname }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="作业">
        <template slot-scope="scope">
          <span>{{ scope.row.jobs }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="增项">
        <template slot-scope="scope">
          <span>{{ scope.row.extra }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="领料明细">
        <template slot-scope="scope">
          <span>{{ scope.row.material }}</span>
        </template>
      </el-table-column>
      
      <el-table-column min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | parseJobState }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="520" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="tableRowClick().start(scope.row.id)">开始</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().stop(scope.row.id)">中断</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().complete(scope.row.id)">完工</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().extra(scope.row.id)">增项</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().process(scope.row.id)">进度</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().details(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page"  :limit.sync="listQuery.rows" @pagination="fetchData"/>

<!-- 开始作业 -->
<el-dialog :title="dialogStart.title" :visible.sync="dialogStart.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">选择班组</span>
            <span class="value">
                <el-select v-model="dialogStart.data.group" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.group"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
       
        <div class="item">
            <span class="name required">备注</span>
            <span class="value">
                <el-input clearable v-model="dialogStart.data.remark" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStart.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStartClick().save()" :loading="dialogStart.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 开始作业 -->


<!-- 中断作业 -->
<el-dialog :title="dialogStop.title" :visible.sync="dialogStop.visible"  width="700px">
    <div class="ci">
        
        <div class="item">
            <span class="name required">原因</span>
            <span class="value">
                <el-input clearable v-model="dialogStop.data.remark" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStop.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStopClick().save()" :loading="dialogStop.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 中断作业 -->

<!-- 作业完工 -->
<el-dialog :title="dialogComplete.title" :visible.sync="dialogComplete.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">选择班组</span>
            <span class="value">
                <el-select v-model="dialogComplete.data.group" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.group"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
       
        <div class="item">
            <span class="name required">备注</span>
            <span class="value">
                <el-input clearable v-model="dialogComplete.data.remark" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogComplete.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogCompleteClick().save()" :loading="dialogComplete.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 作业完工 -->

 
  </div>
</template>

<script>
import * as workshopApi from '@/api/workshop/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
              filtercomplete:true,
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            group:[]
          },
          dialogStart:{
              visible:false,
              saveloading:false,
              title:'开始作业',
              data:{
                group:'',
                remark:''
              }
          },
          dialogStop:{
              visible:false,
              saveloading:false,
              title:'中断作业',
              data:{
                reason:'',
              }
          },
          dialogComplete:{
              visible:false,
              saveloading:false,
              title:'作业完工',
              data:{
                group:'',
                remark:''
              }
          },
          
       }
    
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.banktype,enumHelper.finance.accountBankType);
        that.fetchData();
    },
    filters:{
      parseJobState(val){
        return enumHelper.workshop.jobState.getName(val);
      },

    },
    methods:{
        fetchData(){
          var that=this;
            workshopApi.getJobsList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        refreshClick(){
          this.fetchData();
        },
        addClick(){
            this.dialogStart.visible=true;
        },
        
        tableRowClick(){
            var that=this;
            return {
                start(id){
                  that.dialogStart.visible=true;  
                },
                stop(id){
                  that.dialogStop.visible=true;
                },
                complete(id){
                    that.dialogComplete.visible=true;
                },
                extra(id){
                    
                },
                process(id){
                    
                },
                details(id){
                    
                },
            }
        },
        dialogStartClick(){
            var that=this;
            var dg=that.dialogStart;
            return {
                save(){

                }
            }
        },
        dialogStopClick(){
            var that=this;
            var dg=that.dialogStop;
            return {
                save(){

                }
            }
        },
        dialogCompleteClick(){
            var that=this;
            var dg=that.dialogComplete;
            return {
                save(){

                }
            }
        },
        
        
    }
}
</script>

<style>
</style>